import type { ProcessRecordType } from '../typings'
import {
  ElTimeline,
  ElTimelineItem,
  ElDescriptions,
  ElDescriptionsItem,
  ElLink
} from 'element-plus'
import styles from '../../../index.module.scss'

export default function ProcessRecord (props: { processRecordList: ProcessRecordType[] }) {
  return (
    <ElTimeline class={styles['process-time-line']}>
      {props.processRecordList?.map((item, index) => (
        <ElTimelineItem
          size="large"
          timestamp={item.completeTime}
          type={(index === 0 && 'primary') || undefined}
        >
          <ElDescriptions column={1}>
            <ElDescriptionsItem>{item.userName}</ElDescriptionsItem>
            <ElDescriptionsItem>
              <ElLink type="info" underline={false}>
                {item.taskName}
              </ElLink>
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElTimelineItem>
      ))}
    </ElTimeline>
  )
}
